<template>
  <div class="editInformation">
    <i class="el-icon-close editInformation-close" @click="cancel"></i>
    <h1 class="editInformation-title tc">修改资料</h1>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" label-position="right">
      <el-form-item label="昵称" prop="nickname" >
        <el-input class="email_inp" v-model="form.nickname"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="tx_img">
        <!-- <el-input class="email_inp" v-model="form.nickname"  autocomplete="off"></el-input> -->
          <!-- :on-remove="handleRemove" -->
        <el-upload
          class="avatar-uploader"
          :action="uploadImgUrl"
          :show-file-list="false"
          :on-success="handleSuccess"
          :auto-upload="true"
          :before-upload="beforeUpload">
          <img v-if="txUrl" :src="txUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="工作邮箱" prop="email_work">
        <el-input class="email_inp" v-model="form.email_work"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="银行卡" prop="bank_card">
        <el-input class="email_inp" v-model="form.bank_card"  autocomplete="off" :disabled="!can_operate"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop="register_bank">
        <el-input class="email_inp" v-model="form.register_bank"  autocomplete="off" :disabled="!can_operate"></el-input>
      </el-form-item>
      <el-form-item  prop="alipay_num" >
        <template slot='label'>
          <span>支付宝账号</span>
          <!-- <el-popover
            placement="right"
            title="支付宝账号"
            width="200"
            content="支付宝账号户名必须与您的姓名一致，否则无法正常结算."
            trigger="hover">
            <i class='el-icon-info orange ml10' slot="reference"></i>
          </el-popover> -->
        </template>
        <el-input class="email_inp" v-model="form.alipay_num"  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div class="btns tc">
      <el-button type="primary" class="submit" @click="submit('ruleForm')">提交</el-button>
      <!-- <el-button type="primary" plain class="fr cancel" @click="cancel">取消</el-button> -->
    </div>
  </div>
</template>

<script>
import { getUserInfo, updateUser, getMyInfo } from "~/api/user";
import aes from "~/util/aes.js";
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      if (value === "" || value == undefined || value == null) {
        callback(new Error("请输入邮箱"));
      } else {
        if (
          !/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/.test(
            value
          )
        ) {
          callback(new Error("请输入有效邮箱"));
        } else {
          callback();
        }
      }
    }
    var checkBank = (rule, value, callback) => {
      if (value) {
        if (!(/^[0-9]{16,19}$/.test(value))) {
          callback(new Error("请输入正确的银行卡号"));
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var alipayNum = (rule, value, callback) => {
      if (value != '' && value) {
        if (/^1[3456789]\d{9}$/.test(value) || /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/.test(value)) {
          callback()
        } else {
          callback(new Error("请输入正确的支付宝账号"));
        }
      } else {
        callback()
      }
    }
    var nickname = (rule, value, callback) => {
      if (value == '') {
        callback()
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      title: "修改资料",
      form: {
        email_work: '',
        bank_card: '',
        register_bank: '',
        alipay_num: '',
        nickname: '',
        txUrl: ''
      },
      rules: {
        email_work: [{ required: true, validator: checkEmail, trigger: "blur" }],
        bank_card: [{ required: false, validator: checkBank, trigger: "blur" }],
        alipay_num: [{ required: false, validator: alipayNum, trigger: "blur" }],
        nickname: [{ required: false, validator: nickname, trigger: "blur" }],
      },
      show_bank: false,
      can_operate: false,
      txUrl: '',
      baseUrl: global.baseurl,
      uploadImgUrl: global.baseurl + "/api/upload/img",
      fileListV: []
    }
  },
  created () {
    this.initialization()
  },
  methods: {
    async getMyinfo () {
      let myInfo = await getMyInfo(this.$axios);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data);
      }
    },
    initialization() {
      this.form.user = this.$store.state.user.id; //用户ID
      this.form.email_work = this.$store.state.user.email_work;
      this.can_operate = this.$store.state.user.is_update_bank_info
      this.form.bank_card = this.$store.state.user.bank_card
      this.form.register_bank = this.$store.state.user.register_bank
      this.form.alipay_num = this.$store.state.user.alipay_num
      this.form.nickname = this.$store.state.user.nickname
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var obj = {
            email_work: this.form.email_work
          };
          if (this.form.bank_card && this.form.bank_card != this.$store.state.user.bank_card) {
            obj.bank_card = this.form.bank_card
          }
          if (this.form.register_bank && this.form.register_bank != this.$store.state.user.register_bank) {
            obj.register_bank = this.form.register_bank
          }
          if (this.form.alipay_num && this.form.alipay_num != this.$store.state.user.alipay_num) {
            obj.alipay_num = this.form.alipay_num
          }
          if (this.form.nickname != '' && this.form.nickname != this.$store.state.user.nickname) {
            obj.nickname = this.form.nickname
          }
          if (this.form.tx_img != '' && this.form.tx_img!= this.$store.state.user.tx_img) {
            obj.tx_img = this.form.tx_img
          }
          updateUser(this.$axios, obj)
            .then(res => {
              if (res.data.code == 200) {
                this.$alert('修改成功！', '提示', {
                  confirmButtonText: '确定',
                  type:'success',
                  center: true,
                  callback: action => {
                  }
                })
                this.getMyinfo()
                
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            })
            .catch(err => {
              this.$message({
                message: err,
                type: "error"
              });
      
            });
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    cancel() {
      this.resetForm("ruleForm")
      this.$router.push({path:'/agent/home/menu'})
    },
    // handleRemove(file, fileList) {
    //   let that = this;
    //   //从服务器也删除此文件
    //   that.$axios.delete("/api/delete/file", {
    //     data: {
    //       path: that.fileListV[fileList.length]
    //     }
    //   });
    //   that.fileListV.splice(fileList.length, 1);
    // },
    handleSuccess(res, file, fileList) {
      // this.fileListV.push(res.data);
      if (res.code == 200) {
        this.txUrl = `${this.baseUrl}/storage/upload/${res.data}`
        this.form.tx_img = res.data
      } else {
        this.$alert(res.message, '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }
      
    },
    beforeUpload(file) {
      let that = this;
      let canUpload = true; //是否能够上传（布尔值）
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      //不区分大小写
      if (!/jpg|jpeg|png|gif/i.test(type)) {
        that.$message({
          message: "文件格式只能是jpg/jpeg/png/gif",
          type: "warning"
        });
        canUpload = false;
      }
      let size = file.size / 1024 / 1024;
      if (size > 10) {
        that.$message({
          message: "文件大小不能超过10M",
          type: "warning"
        });
        canUpload = false;
      }
      return canUpload;
    },
  }
}
</script>

<style lang='less' scoped>
  .editInformation {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background: #fff;
    position: relative;
    &-title {
      font-size: 20px;
    }
    &-close {
      font-size: 25px;
      position: absolute;
      right: 30px;
      top: 25px;
      cursor: pointer;
    }
    .el-form {
      width: 450px;
      margin: 20px auto 0;
      .el-form-item {
        margin-bottom: 40px;
        .el-input {
          width: 325px;
        }
      }
    }
    .btns {
      margin-top: 20px;
      // padding-right: 53px;
      .el-button {
        margin-left: 0;
        margin-right: 20px;
        padding: 8px 22px 8px 22px;
        font-size: 15px;
        border-radius: 5px;
      }
      

      .submit {
        background: #249DFF;
        color: #fff;
        margin-right: 0;
      }
      .cancel {
        border:1px solid rgba(36,157,255,1);
        background:rgba(255,255,255,1);
        color: #249DFF;
      }
    }
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 100px;
      height: 100px;

      .el-upload:hover {
        border-color: #409EFF;
      }
       .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
      .avatar {
        width: 100px;
        height: 100px;
        display: block;
      }
    }
  }
    
</style>